<template>
  <div>
    <el-breadcrumb
      style="margin: 5px 0px 0px 30px"
      separator-class="el-icon-arrow-right"
    >
      <!-- <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item> -->
      <el-breadcrumb-item :to="{ path: '/userInformation' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>店铺管理</el-breadcrumb-item>
      <el-breadcrumb-item>奖品上传</el-breadcrumb-item>
    </el-breadcrumb>
    <ul class="shopList">
      <li>
        <b>奖品名称</b
        ><input type="text" placeholder="请输入奖品名称" v-model="prizeName" />
      </li>

      <li>
        <b>奖品价格</b
        ><input type="text" v-model="prizePrice" placeholder="请输入奖品价格" />
      </li>
      <li>
        <b>奖品数量</b
        ><input type="text" v-model="prizeNum" placeholder="请输入奖品数量" />
      </li>

      <li style="widht: 486px">
        <button style="position: relative">
          <span style="position: absolute; left: 75px; top: 5px">上传图片</span
          ><input
            id="inFile"
            @change="uploadImg"
            style="opacity: 0; height: 100%; width: 100%"
            type="file"
          />
        </button>
      </li>
      <li>
        <img
          id="showimg"
          src=""
          alt=""
          style="width: 550px; margin: 0px auto"
        />
      </li>
      <li><button @click="submit">上传</button></li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {},
      prizeName: null,
      prizePrice: null,
      prizeNum: null,
      form: new FormData(),
      Imagefile: [],
    };
  },
  created() {
    this.getUser();
  },
  mounted() {},
  watch: {},
  methods: {
    //用户
    getUser() {
      this.user = JSON.parse(window.sessionStorage.getItem("user"));
    },
    //提示
    open2() {
      this.$message({
        message: "添加成功！",
        type: "success",
      });
    },
    open3() {
        this.$notify({
          title: '警告',
          message: '至少添加一张图片！',
          type: 'warning'
        });
      },
    open4() {
      this.$notify.error({
        title: "上传失败请稍后重试！",
        message: "这是一条错误的提示消息",
      });
    },

    // 图片上传本地保存到data中的formdata中
    uploadImg() {
      // 显示文件
      let showing = document.getElementById("showimg");
      let file = document.getElementById("inFile").files[0];
      this.Imagefile[0] = file;
      let fr = new FileReader();
      fr.readAsDataURL(file);
      fr.onload = function (e) {
        showing.src = e.target.result;
      };
    },
    submit() {
      // 参数append进formdata中
      // 初始化
      let that = this;
      this.form.append("upload", "");
      this.form.append("file", "");
      this.form.append("jpname", "");
      this.form.append("jpdescription", "");
      this.form.append("num", "");
      this.form.append("price", "");
      this.form.append("zjliang", "");
      this.form.append("userid", "");
      this.form.append("token", "");

      // 给值
     
      this.form.set("file", document.getElementById("inFile"));
      this.form.set("jpname", this.prizeName);
      this.form.set("jpdescription", "xxx");
      this.form.set("num", this.prizeNum);
      this.form.set("price", this.prizePrice);
      this.form.set("zjliang", 11);
      this.form.set("userid", 23);
      this.form.set("token", "BEFG6430BEFG6430BEFG6430BEFG6430");
     
    //  判断图片
    if(this.Imagefile.length >=1){
       //提交
        this.form.set("upload", this.Imagefile[0]);
      that.$http
        .post("FoodWeb/uploadJpAction.action", that.form, {
          headers: { "content-type": "multipart/form-data" },
        })
        .then((res) => {
          if (res.data.errorcode == 0) {
            that.open2();
            setTimeout(() => {
              location.reload();
            }, 2000);
          } else {
            that.open4();
          }
        });
    }else{
      that.open3();
    }

    },
  },
};
</script>

<style lang="less" scoped>
.shopList {
  display: flex;
  width: 600px;
  flex-direction: column;
  list-style: none;
  margin: 70px auto 0px;
  li {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    input {
      width: 300px;
      height: 30px;
    }
    select {
      width: 308px;
      height: 36px;
    }
    button {
      margin: 0px auto;
      width: 200px;
      height: 35px;
      background-color: #e31939;
      border-radius: 0.4em;
      border-color: rgb(207, 1, 1);
      color: white;
      font-weight: inherit;
    }
  }

  // li:nth-of-type(odd) {
  //   background-color: #f8f8f8;
  // }
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
